<template>
  <div id="red-packet-bg" v-show="showStatus !=0 " @click="close">
    <transition enter-active-class="animated bounceIn">
      <!--打开红包-->
      <div class="redPacket" v-show=" showStatus===1 || showStatus===2 ">
        <div class="main" @click.stop>
          <div class="header">{{redPacketInfo.topic}}</div>
          <div class="desc">{{ showStatus===1 ? redPacketInfo.description : '手太慢,红包派完了!'}}</div>
          <div class="grab" @click="openPacket" v-show="showStatus===1"></div>
          <div class="showall" @click="showOther(false)">看看大家的手气</div>
        </div>
      </div>
    </transition>
    <!--发红包-->
    <div class="sendRedPacket" v-show="showStatus==8">
      <div class="main" @click.stop>
        <div class="header"></div>
        <div class="body">
          <div>
            <span class="title">总金额</span>
            <input type="text" name="" v-model="rpb.amount" placeholder="0.00">
            <span class="unit">元</span>
          </div>
          <div>
            <span class="title">红包个数</span>
            <input type="text" name="" v-model="rpb.count" placeholder="填写个数">
            <span class="unit">个</span>
          </div>
          <div>
            <span class="title">标题</span>
            <input type="text" name="" maxlength="8" v-model="rpb.topic" placeholder="超级大红包">
          </div>
          <div>
            <span class="title">留言</span>
            <input type="text" name="" maxlength="15" v-model="rpb.desc" placeholder="恭喜发财,大吉大利">
          </div>
        </div>
        <div class="footer">
          <div class="btn" @click="sendRedPacket">塞钱进红包</div>
        </div>
      </div>
    </div>
    <transition enter-active-class="animated bounceIn">
      <!--大家的手气-->
      <div class="redPacketList" v-show="showStatus==3">
        <div class="main" @click.stop>
          <div class="header" :class="{ headernoamount : !isGetted }">
            <div class="title">{{redPacketInfo.topic}}</div>
            <div class="desc">{{redPacketInfo.description}}</div>
            <div v-show="isGetted">
              <div class="money">{{myAmount}}元</div>
              <div class="tip">已转入个人账户</div>
            </div>
          </div>
          <div class="userList" :class="{ biguserList : !isGetted }">
            <p :class="{ headerp : !isGetted }">已领取
              <span>{{userList.length}}</span>/
              <span>{{redPacketInfo.count}}</span>个 共
              <span>{{userAllAmount}}</span>/
              <span>{{redPacketInfo.amount}}</span>元 </p>
            <ul>
              <li v-for="(item,index) in userList" :key="index">
                <img :src="item.userHeadImg" width="35px">
                <div class="name">{{item.userName}}</div>
                <div class="timer">{{ formatDate(new Date( parseInt(item.time) ) )}}</div>
                <div class="money">{{item.amount}}元</div>
                <div class="best" v-show=" userList.length==redPacketInfo.count && item.isBest==1">
                  <img src="http://p2ebqp10o.bkt.clouddn.com/best.png" height="16px">
                  <span>手气最佳</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </transition>
    <!--加载提示-->
    <div v-show="msg.length>0" class="red-loading">
      {{msg}}
    </div>
  </div>
</template>
<script>
  import {mapGetters} from "vuex";
  import "./redPack.scss";

  export default {
    name: "redPack",
    data() {
      return {
        showStatus: 0, //是不是显示
        isGetted: false, //是不是抢过红包
        redPacketInfo: {
          id: 0, //红包ID
          topic: "超级大红包",
          description: "恭喜发财,大吉大利",
          amount: 0, //总金额
          count: 0 //总个数
        },
        //红包信息
        rpb: {
          amount: "1000",
          count: "2",
          topic: "超级大红包",
          desc: "恭喜发财,大吉大利",
          roomId: 0
        },
        userList: [], //抢到的用户列表
        userAllAmount: 0, //用户已经抢到的钱
        myAmount: 0, //用户抢到的钱
        balance: 0, //剩余红包钱
        msg: ""
      };
    },
    mounted() {
      this.rpb.roomId = this.videoInfo.id;
    },
    computed: {
      ...mapGetters(["userInfo", "videoInfo"])
    },
    methods: {
      init(msgBody) {
        this.redPacketInfo.id = msgBody.id;
        this.redPacketInfo.topic = msgBody.topic;
        this.redPacketInfo.description = msgBody.description;
      },
      // 创建红包
      sendRedPacket() {
        //必须输入正确的数字类型
        if (
          isNaN(Number(this.rpb.count)) ||
          isNaN(Number(this.rpb.amount))
        ) {
          $toast.show("请输入正确数字", 1000);
          return;
        }
        $loading.show("红包创建中...");
        this.$ajax({
          method: "post",
          url: "red/create",
          data: Object.assign({
            userId: this.userInfo.id
          }, this.rpb)
        })
          .then(response => {
            $loading.hide();
            if (response.code === 1) {
              var resList = response.data;
              this.showStatus = 0;
            }
          })
          .catch(() => {
            $loading.hide();
          });
      },
      // 查看当前红包的状态
      queryPacketStatus(msgBody) {
        this.init(msgBody);
        $loading.show("正在打开红包...");
        this.$ajax({
          method: "post",
          url: "red/status/" + this.redPacketInfo.id,
          data: this.userInfo
        }).then(response => {
          $loading.hide();
          if (response.code === 1) {
            let data = response.data;
            //已经抢完的红包
            if (data.status === 1002) {
              this.showStatus = 2;
              return;
            }

            if (!data.myGrabInfo) {
              this.showStatus = 1;
              return;
            }

            this.redpackStatusShow(data);
            return;
          }
          this.showStatus = 2;
        });
      },
      // 抢红包
      openPacket() {
        $loading.show("正在拼命抢红包...");
        this.$ajax({
          method: "post",
          url: "red/grab/" + this.redPacketInfo.id,
          data: this.userInfo
        })
          .then(response => {
            $loading.hide();
            if (response.code === 1) {
              this.redpackStatusShow(response.data);
            }
          })
          .catch(() => {
            $loading.hide();
          });
      },
      close() {
        this.showStatus = 0;
        this.redPacketInfo = {};
        this.userList = []; //抢到的用户列表
      },
      // 红包状态切换展示
      redpackStatusShow(data) {
        //展示红包详情
        this.queryGrabUserList();
        if (data.myGrabInfo) {
          this.isGetted = true;
          this.myAmount = data.myGrabInfo[0].amount;
        }
        if (data.amount) {
          this.isGetted = true;
          this.myAmount = data.amount;
        }
        this.showStatus = 3;
      },
      //获取已经抢到红包的用户数据
      queryGrabUserList() {
        this.$ajax({
          method: "get",
          url: "red/grabList/" + this.redPacketInfo.id
        }).then(response => {
          if (response.code == 1) {
            let data = response.data;
            this.redPacketInfo = data.redPacketInfo[0];
            this.userList = data.userList;
            this.sumUserAmount(userList);
          }
        });
      },
      //计算已经被抢的红包总额
      sumUserAmount(userList) {
        let allMount = 0;
        userList.map(item => {
          allMount += Number(item.amount);
        });
        this.userAllAmount = allMount;
      },
      formatDate(date) {
        return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
      }
    }
  };
</script>
